.root {
  display: flex;
  flex-direction: column;
  width: 64px;
  height: 64px;
  position: relative;
  opacity: 0.75;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  color: var(--token-0IloF6TmFvF);
  -webkit-transition-property: all;
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 0.2s;
  padding: 4px;
}
.root > :global(.__wab_flex-container) {
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  align-content: unset;
  margin-top: calc(0px - 8px);
  height: calc(100% + 8px);
}
.root > :global(.__wab_flex-container) > *,
.root > :global(.__wab_flex-container) > :global(.__wab_slot) > *,
.root > :global(.__wab_flex-container) > picture > img,
.root > :global(.__wab_flex-container) > :global(.__wab_slot) > picture > img {
  margin-top: 8px;
}
.rootactive {
  opacity: 1;
}
.root:hover {
  opacity: 1;
}
.fixIconHeight {
  display: flex;
  filter: grayscale(100%);
  transition-property: all;
  transition-duration: 0.5s;
  height: 28px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.5s;
}
.fixIconHeightactive {
  filter: grayscale(0%);
}
.root:hover .fixIconHeight {
  filter: grayscale(0%);
}
.slotTargetName {
  text-align: center;
  font-size: 12px;
}
